<template>
    <!-- 容器优化：使用flex居中，适配不同屏幕 -->
    <div class="form-container">
        <el-form :model="ruleForm" :rules="validationRules" ref="ruleFormRef" label-width="100px" class="demo-ruleForm"
            status-icon :label-suffix="':'">
            <!-- 商店名输入项：添加表单验证、占位提示、长度限制 -->
            <el-form-item label="商店名称" prop="storeName" :error="customError">
                <el-input v-model.trim="ruleForm.storeName" placeholder="请输入3-20个字符的商店名称" :maxlength="20"
                    show-word-limit clearable @input="clearCustomError" />
            </el-form-item>

            <!-- 按钮区域：优化布局、添加加载状态 -->
            <el-form-item class="form-actions">
                <el-button type="primary" @click="submitForm()" :loading="isSubmitting" :disabled="isSubmitting">
                    立即创建
                </el-button>
                <el-button @click="resetForm()" :disabled="isSubmitting">
                    重置
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { AddStore } from '@/api/admin/store';
import { Message } from 'element-ui'; // 单独引入，优化打包体积

export default {
    name: 'StoreCreateForm', // 组件命名，便于调试
    data() {
        return {
            // 表单数据模型（统一管理，符合el-form规范）
            ruleForm: {
                storeName: ''
            },
            // 表单验证规则（完善验证逻辑）
            validationRules: {
                storeName: [
                    { required: true, message: '请输入商店名称', trigger: 'blur' },
                    { min: 3, max: 20, message: '商店名称长度需在3-20个字符之间', trigger: 'blur' },
                    { pattern: /^[a-zA-Z0-9\u4e00-\u9fa5-_]+$/, message: '仅支持中英文、数字、下划线和短横线', trigger: 'blur' }
                ]
            },
            isSubmitting: false, // 提交状态锁，防止重复提交
            customError: '' // 自定义错误提示
        };
    },
    methods: {
        // 清除自定义错误
        clearCustomError() {
            this.customError = '';
        },

        // 提交表单
        async submitForm() {
            // 1. 表单验证
            try {
                await this.$refs.ruleFormRef.validate();
            } catch (error) {
                Message.warning('请完善表单信息后提交');
                return;
            }

            // 2. 防止重复提交
            if (this.isSubmitting) return;
            this.isSubmitting = true;

            try {
                // 3. 接口请求（传递对象格式，便于后续扩展参数）
                const res = await AddStore({ storeName: this.ruleForm.storeName });

                // 4. 响应处理（优化判断逻辑，统一成功提示）
                if (res.success || (res.code !== undefined && res.code === 200)) {
                    Message.success('商店创建成功！');
                    // 延迟跳转，让用户看到提示
                    setTimeout(() => {
                        this.$router.go(-1);
                    }, 1500);
                } else {
                    this.customError = res.msg || '创建失败，请稍后重试';
                    Message.error(this.customError);
                }
            } catch (error) {
                // 5. 错误处理（更详细的错误提示）
                console.error('创建商店失败：', error);
                const errorMsg = error.response?.data?.msg || '网络异常，请检查连接后重试';
                this.customError = errorMsg;
                Message.error(errorMsg);
            } finally {
                // 6. 恢复提交状态
                this.isSubmitting = false;
            }
        },

        // 重置表单
        resetForm() {
            this.$refs.ruleFormRef.resetFields(); // 重置表单字段和验证状态
            this.customError = ''; // 清除错误提示
        }
    },
    // 组件卸载时清除未完成的请求（可选，根据项目需求）
    beforeDestroy() {
        this.isSubmitting = false;
    }
};
</script>

<style scoped>
/* 容器优化：垂直水平居中，响应式布局 */
.form-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: calc(100vh - 60px);
    box-sizing: border-box;
}

/* 表单样式优化 */
.demo-ruleForm {
    width: 100%;
    max-width: 500px;
    padding: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

/* 按钮区域布局优化 */
.form-actions {
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 10px;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
    .demo-ruleForm {
        padding: 20px;
        max-width: 100%;
    }

    .form-container {
        align-items: center;
        min-height: 100vh;
    }
}
</style>